<template>
	<view class="container">
		<u-navbar :isFixed="false" :borderBottom="false" title="" background="" :isHome="false" :isBack="false">
			<view class="flex align-center flex-nowrap diygw-col-24 justify-start flexbar-clz">
				<text class="flex icon diygw-col-0 icon-clz diy-icon-locationfill"></text>
				<view class="diygw-col-0"> 广东社区 </view>
				<text class="flex icon1 diygw-col-0 diy-icon-right"></text>
			</view>
		</u-navbar>
		<image src="/static/1.png" class="response diygw-col-24 image-clz" mode="widthFix"></image>
		<view class="flex flex-wrap diygw-col-24 items-center flex-clz">
			<image src="/static/2.png" class="diygw-image diygw-col-0" style="height: 18px !important; width: 32px" mode="widthFix"></image>
			<view class="diygw-col-0 text1-clz"> 关于系统上线运行的通知 08-21 </view>
			<text class="flex icon2 diygw-col-0 icon2-clz diy-icon-right"></text>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex19-clz">
			<view class="flex diygw-col-12 flex-direction-column flex-wrap flex1-clz">
				<view class="diygw-col-24 text2-clz"> 附近美食推荐 </view>
				<view class="flex flex-wrap diygw-col-24 items-start flex2-clz">
					<image src="/static/6.png" class="diygw-image diygw-col-0 image3-clz" style="height: 60px !important; width: 60px" mode="widthFix"></image>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-start flex3-clz">
						<view class="diygw-col-0 text3-clz"> 香辣牛腩面 </view>
						<view class="diygw-col-0 text15-clz"> 56人已下单 </view>
						<view class="diygw-col-0 text16-clz"> ￥23.98 </view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-start flex5-clz">
					<image src="/static/7.png" class="diygw-image diygw-col-0 image5-clz" style="height: 60px !important; width: 60px" mode="widthFix"></image>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-start flex16-clz">
						<view class="diygw-col-0 text6-clz"> 香辣牛腩面 </view>
						<view class="diygw-col-0 text18-clz"> 56人已下单 </view>
						<view class="diygw-col-0 text20-clz"> ￥23.98 </view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-start flex4-clz">
					<image src="/static/6.png" class="diygw-image diygw-col-0 image4-clz" style="height: 60px !important; width: 60px" mode="widthFix"></image>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-start flex6-clz">
						<view class="diygw-col-0 text5-clz"> 香辣牛腩面 </view>
						<view class="diygw-col-0 text7-clz"> 56人已下单 </view>
						<view class="diygw-col-0 text17-clz"> ￥23.98 </view>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-between flex8-clz">
				<view class="flex diygw-col-24 flex-direction-column justify-center items-start flex-wrap flex9-clz">
					<view class="diygw-col-24 text9-clz"> 跑腿服务 </view>
					<view class="flex flex-wrap diygw-col-24 justify-around flex7-clz">
						<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex11-clz">
							<image src="/static/3.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
							<view class="diygw-col-0"> 点外卖 </view>
						</view>
						<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex12-clz">
							<image src="/static/4.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
							<view class="diygw-col-0"> 点外卖 </view>
						</view>
						<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex10-clz">
							<image src="/static/5.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
							<view class="diygw-col-0"> 万能任务 </view>
						</view>
					</view>
				</view>
				<image src="/static/23.png" class="diygw-image diygw-col-24 image6-clz" style="height: 180px !important; width: 100%" mode="widthFix"></image>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex13-clz">
			<view class="flex diygw-col-12 flex-direction-column justify-center items-start flex-wrap flex33-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-baseline flex15-clz">
					<view class="diygw-col-0 text13-clz"> 家庭服务 </view>
					<view class="diygw-col-0 text8-clz"> 更多 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-around flex35-clz">
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex37-clz">
						<image src="/static/8.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 保洁 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex39-clz">
						<image src="/static/9.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 开锁 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex41-clz">
						<image src="/static/10.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 维修 </view>
					</view>
				</view>
			</view>
			<view class="flex diygw-col-12 flex-direction-column justify-center items-start flex-wrap flex14-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-baseline flex18-clz">
					<view class="diygw-col-0 text14-clz"> 小区物业 </view>
					<view class="diygw-col-0 text21-clz"> 更多 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-around flex21-clz">
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex23-clz">
						<image src="/static/11.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 物业 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex25-clz">
						<image src="/static/12.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 缴费 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex27-clz">
						<image src="/static/14.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 保修 </view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex17-clz">
			<view class="flex diygw-col-12 flex-direction-column justify-center items-start flex-wrap flex22-clz">
				<image src="/static/21.png" class="diygw-image diygw-col-24 image9-clz" style="height: 100px !important; width: 100%" mode="widthFix"></image>
			</view>
			<view class="flex diygw-col-12 flex-direction-column justify-center items-start flex-wrap flex42-clz">
				<view class="flex flex-wrap diygw-col-24 justify-between items-baseline flex44-clz">
					<view class="diygw-col-0 text34-clz"> 车服务 </view>
					<view class="diygw-col-0 text36-clz"> 更多 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 justify-around flex46-clz">
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex48-clz">
						<image src="/static/15.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 汽车 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex50-clz">
						<image src="/static/16.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 保养 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex52-clz">
						<image src="/static/17.png" class="diygw-image diygw-col-0" style="height: 24px !important; width: 24px" mode="aspectFit"></image>
						<view class="diygw-col-0"> 维修 </view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-direction-column tabs-clz">
			<view class="diygw-tabs text-center justify-start small-border">
				<view class="diygw-tab-item" :class="index == tabsIndex ? ' tabs-title-cur  cur text-green ' : 'tabs-title-item'" v-for="(item, index) in tabsDatas" :key="index" @click="changeTabs" :data-index="index"> <text v-if="item.icon" :class="item.icon"></text> {{ item.text }} </view>
			</view>
		</view>
		<view class="flex diygw-col-24 items-start flex-nowrap flex20-clz">
			<image src="/static/18.png" class="diygw-image diygw-col-0 image13-clz" style="height: 80px !important; width: 80px" mode="scaleToFill"></image>
			<view class="flex flex-wrap diygw-col-0 flex-direction-column flex30-clz">
				<view class="flex flex-wrap diygw-col-0 flex24-clz">
					<view class="flex diygw-col-0 flex-direction-column justify-between flex-nowrap flex26-clz">
						<view class="diygw-col-24 text19-clz"> 臻品羊味 涮羊肉 </view>
						<view class="flex flex-wrap diygw-col-24 flex29-clz">
							<view class="diygw-col-0"> 已售25678 </view>
							<view class="diygw-col-0 text28-clz"> 已售25678 </view>
						</view>
						<view class="diygw-col-0"> 西安市雁塔区城南客运站 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 items-center flex28-clz">
						<text class="flex icon3 diygw-col-0 icon3-clz diy-icon-locationfill"></text>
						<view class="diygw-col-0"> 0.46km </view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex31-clz">
					<view class="diygw-col-0 red text29-clz"> 券 </view>
					<view class="diygw-col-0 text22-clz"> 2元 </view>
					<view class="diygw-col-0"> 代金券（满25可用） </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex32-clz">
					<view class="diygw-col-0 red text32-clz"> 新 </view>
					<view class="diygw-col-0"> 本店新用户减 </view>
					<view class="diygw-col-0 text35-clz"> 2元 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex34-clz">
					<view class="diygw-col-0 red text33-clz"> 满 </view>
					<view class="diygw-col-0"> 满 </view>
					<view class="diygw-col-0 text47-clz"> 138元 </view>
					<view class="diygw-col-0"> 赠送田螺一份 </view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 items-start flex-nowrap flex36-clz">
			<image src="/static/19.png" class="diygw-image diygw-col-0 image15-clz" style="height: 80px !important; width: 80px" mode="scaleToFill"></image>
			<view class="flex flex-wrap diygw-col-0 flex-direction-column flex40-clz">
				<view class="flex flex-wrap diygw-col-0 flex45-clz">
					<view class="flex diygw-col-0 flex-direction-column justify-between flex-nowrap flex49-clz">
						<view class="diygw-col-24 text46-clz"> 蚝太郎烧烤（南飞鸿店） </view>
						<view class="flex flex-wrap diygw-col-24 flex53-clz">
							<view class="diygw-col-0"> 已售25678 </view>
							<view class="diygw-col-0 text51-clz"> 已售25678 </view>
						</view>
						<view class="diygw-col-0"> 西安市雁塔区城南客运站 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 items-center flex55-clz">
						<text class="flex icon5 diygw-col-0 icon5-clz diy-icon-locationfill"></text>
						<view class="diygw-col-0"> 0.46km </view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex57-clz">
					<view class="diygw-col-0 red text57-clz"> 券 </view>
					<view class="diygw-col-0 text59-clz"> 2元 </view>
					<view class="diygw-col-0"> 代金券（满25可用） </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex59-clz">
					<view class="diygw-col-0 red text63-clz"> 新 </view>
					<view class="diygw-col-0"> 本店新用户减 </view>
					<view class="diygw-col-0 text67-clz"> 2元 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex61-clz">
					<view class="diygw-col-0 red text69-clz"> 满 </view>
					<view class="diygw-col-0"> 满 </view>
					<view class="diygw-col-0 text73-clz"> 138元 </view>
					<view class="diygw-col-0"> 赠送田螺一份 </view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 items-start flex-nowrap flex38-clz">
			<image src="/static/20.png" class="diygw-image diygw-col-0 image17-clz" style="height: 80px !important; width: 80px" mode="scaleToFill"></image>
			<view class="flex flex-wrap diygw-col-0 flex-direction-column flex47-clz">
				<view class="flex flex-wrap diygw-col-0 flex54-clz">
					<view class="flex diygw-col-0 flex-direction-column justify-between flex-nowrap flex58-clz">
						<view class="diygw-col-24 text48-clz"> 大城小鸡黄焖鸡排骨米饭 </view>
						<view class="flex flex-wrap diygw-col-24 flex62-clz">
							<view class="diygw-col-0"> 已售25678 </view>
							<view class="diygw-col-0 text56-clz"> 已售25678 </view>
						</view>
						<view class="diygw-col-0"> 西安市雁塔区城南客运站 </view>
					</view>
					<view class="flex flex-wrap diygw-col-0 items-center flex64-clz">
						<text class="flex icon6 diygw-col-0 icon6-clz diy-icon-locationfill"></text>
						<view class="diygw-col-0"> 0.46km </view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex66-clz">
					<view class="diygw-col-0 red text68-clz"> 券 </view>
					<view class="diygw-col-0 text72-clz"> 2元 </view>
					<view class="diygw-col-0"> 代金券（满25可用） </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex68-clz">
					<view class="diygw-col-0 red text78-clz"> 新 </view>
					<view class="diygw-col-0"> 本店新用户减 </view>
					<view class="diygw-col-0 text82-clz"> 2元 </view>
				</view>
				<view class="flex flex-wrap diygw-col-24 items-center flex70-clz">
					<view class="diygw-col-0 red text84-clz"> 满 </view>
					<view class="diygw-col-0"> 满 </view>
					<view class="diygw-col-0 text88-clz"> 138元 </view>
					<view class="diygw-col-0"> 赠送田螺一份 </view>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				data: {
					code: 200,
					msg: '获取数据成功',
					data: [
						{
							title: 'sdfasdf标题1111221111',
							id: 1,
							attr: {
								title: '标题11122211111'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221112',
							id: 2,
							attr: {
								title: '标题11122211112'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221113',
							id: 3,
							attr: {
								title: '标题11122211113'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221114',
							id: 4,
							attr: {
								title: '标题11122211114'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221115',
							id: 5,
							attr: {
								title: '标题11122211115'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						}
					]
				},
				tabsDatas: [
					{ text: `全部`, icon: `` },
					{ text: `餐饮`, icon: `` },
					{ text: `维修`, icon: `` },
					{ text: `便利店`, icon: `` },
					{ text: `家政`, icon: `` }
				],
				tabsIndex: 0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			// 新增接口 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};
				let data = await this.$http.post('https://php.diygw.com/article.php', {}, {}, 'json');

				this.data = data;
			},
			changeTabs(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.tabsIndex) return;
				this.setData({
					tabsIndex: index
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flexbar-clz {
		color: #ffffff;
	}
	.icon-clz {
		margin-left: 15px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.icon {
		font-size: 32px;
	}
	.icon1 {
		font-size: 16px;
	}
	.image-clz {
		margin-left: 15px;
		border-bottom-left-radius: 15px;
		overflow: hidden;
		width: calc(100% - 15px - 15px) !important;
		border-top-left-radius: 15px;
		margin-top: 15px;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
		margin-bottom: 0px;
		margin-right: 15px;
	}
	.flex-clz {
		padding-top: 15px;
		border-bottom-left-radius: 15px;
		padding-left: 15px;
		padding-bottom: 15px;
		border-top-right-radius: 15px;
		margin-right: 15px;
		background-color: #ffffff;
		margin-left: 15px;
		overflow: hidden;
		width: calc(100% - 15px - 15px) !important;
		border-top-left-radius: 15px;
		margin-top: 15px;
		border-bottom-right-radius: 15px;
		margin-bottom: 0px;
		padding-right: 15px;
	}
	.text1-clz {
		flex: 1;
		font-size: 14px !important;
	}
	.icon2-clz {
		color: #c2c2c2;
	}
	.icon2 {
		font-size: 16px;
	}
	.flex19-clz {
		z-index: 100;
	}
	.flex1-clz {
		border-bottom-left-radius: 12px;
		z-index: 100;
		border-top-right-radius: 12px;
		margin-right: 5px;
		background-color: #f8f8f8;
		margin-left: 15px;
		overflow: hidden;
		width: calc(50% - 15px - 5px) !important;
		border-top-left-radius: 12px;
		margin-top: 15px;
		border-bottom-right-radius: 12px;
		background-image: linear-gradient(180deg, rgba(228, 242, 255, 1) 0%, rgba(228, 242, 255, 0.9697607558648459) 70%);
		margin-bottom: 15px;
	}
	.text2-clz {
		padding-top: 8px;
		color: #ffffff;
		padding-left: 10px;
		font-size: 14px !important;
		padding-bottom: 8px;
		background-image: linear-gradient(135deg, rgba(108, 86, 246, 1) 0%, rgba(108, 86, 245, 1) 63%, rgba(228, 242, 255, 1) 63%);
		padding-right: 10px;
	}
	.flex2-clz {
		padding-top: 5px;
		border-bottom-left-radius: 12px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 12px;
		margin-right: 2px;
		background-color: #ffffff;
		margin-left: 2px;
		overflow: hidden;
		width: calc(100% - 2px - 2px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 5px;
	}
	.image3-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex3-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text3-clz {
		font-weight: bold;
	}
	.text15-clz {
		border: 1px solid #ffa84f;
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		color: #ffa84f;
		padding-left: 5px;
		font-size: 11px !important;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 5px;
	}
	.text16-clz {
		color: #ff0000;
		flex: 1;
		font-size: 14px !important;
	}
	.flex5-clz {
		padding-top: 5px;
		border-bottom-left-radius: 12px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 12px;
		margin-right: 2px;
		background-color: #ffffff;
		margin-left: 2px;
		overflow: hidden;
		width: calc(100% - 2px - 2px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 5px;
	}
	.image5-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex16-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text6-clz {
		font-weight: bold;
	}
	.text18-clz {
		border: 1px solid #ffa84f;
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		color: #ffa84f;
		padding-left: 5px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 5px;
	}
	.text20-clz {
		color: #ff0000;
		flex: 1;
		font-size: 14px !important;
	}
	.flex4-clz {
		padding-top: 5px;
		border-bottom-left-radius: 12px;
		padding-left: 5px;
		padding-bottom: 5px;
		border-top-right-radius: 12px;
		margin-right: 2px;
		background-color: #ffffff;
		margin-left: 2px;
		overflow: hidden;
		width: calc(100% - 2px - 2px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 5px;
	}
	.image4-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex6-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.text5-clz {
		font-weight: bold;
	}
	.text7-clz {
		border: 1px solid #ffa84f;
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		color: #ffa84f;
		padding-left: 5px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 5px;
	}
	.text17-clz {
		color: #ff0000;
		flex: 1;
		font-size: 14px !important;
	}
	.flex8-clz {
		margin-left: 5px;
		border-bottom-left-radius: 12px;
		z-index: 100;
		overflow: hidden;
		width: calc(50% - 5px - 15px) !important;
		border-top-left-radius: 12px;
		margin-top: 15px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		margin-bottom: 15px;
		margin-right: 15px;
	}
	.flex9-clz {
		margin-left: 0px;
		border-bottom-left-radius: 12px;
		z-index: 100;
		overflow: hidden;
		width: 100% !important;
		border-top-left-radius: 12px;
		margin-top: 0px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		background-image: linear-gradient(180deg, rgba(205, 238, 255, 1) 0%, rgba(220, 243, 255, 1) 19%, rgba(255, 255, 255, 1) 43%);
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.text9-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(100% - 5px - 5px) !important;
		font-size: 14px !important;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex7-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.image6-clz {
		background-color: #f8f8f8;
		border-bottom-left-radius: 12px;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		background-image: linear-gradient(180deg, rgba(228, 242, 255, 1) 0%, rgba(228, 242, 255, 0.9697607558648459) 70%);
	}
	.flex13-clz {
		margin-left: 0px;
		z-index: 100;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.flex33-clz {
		border-bottom-left-radius: 12px;
		z-index: 100;
		border-top-right-radius: 12px;
		margin-right: 5px;
		background-color: #ffffff;
		margin-left: 15px;
		overflow: hidden;
		flex: 1;
		width: calc(50% - 15px - 5px) !important;
		border-top-left-radius: 12px;
		margin-top: 0px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
	}
	.flex15-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text13-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.text8-clz {
		color: #5c5c5c;
	}
	.flex35-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.flex14-clz {
		border-bottom-left-radius: 12px;
		z-index: 100;
		border-top-right-radius: 12px;
		margin-right: 15px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		width: calc(50% - 5px - 15px) !important;
		border-top-left-radius: 12px;
		margin-top: 0px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
	}
	.flex18-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text14-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.text21-clz {
		color: #5c5c5c;
	}
	.flex21-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.flex17-clz {
		margin-left: 0px;
		z-index: 100;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.flex22-clz {
		margin-left: 15px;
		border-bottom-left-radius: 12px;
		z-index: 100;
		overflow: hidden;
		flex: 1;
		width: calc(50% - 15px - 5px) !important;
		border-top-left-radius: 12px;
		margin-top: 0px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		margin-right: 5px;
	}
	.image9-clz {
		flex: 1;
	}
	.flex42-clz {
		border-bottom-left-radius: 12px;
		z-index: 100;
		border-top-right-radius: 12px;
		margin-right: 15px;
		background-color: #ffffff;
		margin-left: 5px;
		overflow: hidden;
		flex: 1;
		width: calc(50% - 5px - 15px) !important;
		border-top-left-radius: 12px;
		margin-top: 0px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
	}
	.flex44-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text34-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.text36-clz {
		color: #5c5c5c;
	}
	.flex46-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.tabs-clz {
		margin-left: 5px;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.tabs-title-item {
		color: #898989 !important;
	}
	.tabs-title {
	}
	.tabs-title-cur {
		color: #000000 !important;
	}
	.flex20-clz {
		padding-top: 10px;
		border-bottom-left-radius: 12px;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 12px;
		margin-right: 10px;
		background-color: #ffffff;
		margin-left: 10px;
		box-shadow: 0px 1px 4px 1px rgba(193, 193, 193, 0.19);
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 10px;
	}
	.image13-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex30-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.flex24-clz {
		flex: 1;
	}
	.flex26-clz {
		flex: 1;
	}
	.text19-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.flex29-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 0px;
	}
	.text28-clz {
		margin-left: 5px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.flex28-clz {
		color: #5e5e5e;
	}
	.icon3-clz {
		margin-left: 0px;
		color: #0d01f3;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 3px;
	}
	.icon3 {
		font-size: 16px;
	}
	.flex31-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text29-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text22-clz {
		color: #ff0000;
	}
	.flex32-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text32-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text35-clz {
		color: #ff0000;
	}
	.flex34-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text33-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text47-clz {
		color: #ff0000;
	}
	.flex36-clz {
		padding-top: 10px;
		border-bottom-left-radius: 12px;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 12px;
		margin-right: 10px;
		background-color: #ffffff;
		margin-left: 10px;
		box-shadow: 0px 1px 4px 1px rgba(193, 193, 193, 0.19);
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 10px;
	}
	.image15-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		font-weight: bold;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex40-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.flex45-clz {
		flex: 1;
	}
	.flex49-clz {
		flex: 1;
	}
	.text46-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.flex53-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 0px;
	}
	.text51-clz {
		margin-left: 5px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.flex55-clz {
		color: #5e5e5e;
	}
	.icon5-clz {
		margin-left: 0px;
		color: #0d01f3;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 3px;
	}
	.icon5 {
		font-size: 16px;
	}
	.flex57-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text57-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text59-clz {
		color: #ff0000;
	}
	.flex59-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text63-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text67-clz {
		color: #ff0000;
	}
	.flex61-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text69-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text73-clz {
		color: #ff0000;
	}
	.flex38-clz {
		padding-top: 10px;
		border-bottom-left-radius: 12px;
		padding-left: 10px;
		padding-bottom: 10px;
		border-top-right-radius: 12px;
		margin-right: 10px;
		background-color: #ffffff;
		margin-left: 10px;
		box-shadow: 0px 1px 4px 1px rgba(193, 193, 193, 0.19);
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 12px;
		margin-top: 10px;
		border-bottom-right-radius: 12px;
		margin-bottom: 0px;
		padding-right: 10px;
	}
	.image17-clz {
		border-bottom-left-radius: 6px;
		overflow: hidden;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.flex47-clz {
		padding-top: 0px;
		flex: 1;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	.flex54-clz {
		flex: 1;
	}
	.flex58-clz {
		flex: 1;
	}
	.text48-clz {
		font-weight: bold;
		font-size: 14px !important;
	}
	.flex62-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 0px;
	}
	.text56-clz {
		margin-left: 5px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.flex64-clz {
		color: #5e5e5e;
	}
	.icon6-clz {
		margin-left: 0px;
		color: #0d01f3;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 3px;
	}
	.icon6 {
		font-size: 16px;
	}
	.flex66-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text68-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text72-clz {
		color: #ff0000;
	}
	.flex68-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text78-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text82-clz {
		color: #ff0000;
	}
	.flex70-clz {
		margin-left: 0px;
		width: 100% !important;
		margin-top: 5px;
		margin-bottom: 0px;
		margin-right: 0px;
	}
	.text84-clz {
		padding-top: 2px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		padding-left: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		padding-right: 2px;
	}
	.text88-clz {
		color: #ff0000;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		background-image: linear-gradient(186deg, rgba(104, 219, 202, 1) 0%, rgba(117, 217, 255, 1) 32%, rgba(247, 247, 247, 1) 47%);

		font-size: 12px;
	}
	.container {
		width: 750rpx !important;
		margin: 0 auto;
	}
</style>
